<template>
	<div class="d-flex justify-content-between friends hideScrollBar">
		<div class="flex-grow-1 eventContent px-5 py-4">
			<HorizontalNav :navs="navs" />
			<div v-if="!events.length" class="text-black-50 text-center noEvents">暂无动态</div>
			<div
				v-else
				class="eventItem flex-grow-1 border-bottom pb-4 pt-3 d-flex canSelect"
				v-for="(event, eventIndex) in events"
				:key="eventIndex"
			>
				<div class="me-3">
					<img class="rounded-circle" width="43" height="43" :src="event.user?.avatarUrl" alt="" />
				</div>
				<div class="position-relative rightContent flex-grow-1">
					<div>
						<span class="colorA me-2">{{ event.actName }}</span>
						<span>{{ mapEventName(event.type) }}</span>
					</div>
					<div class="text-muted pt-2 pb-3">
						{{ YYYYMMDD(event.eventTime) }}
					</div>
					<div>
						<span class="colorA cursor-pointer" v-html="event.jsonActive"></span>
						<span class="richText" v-html="event.jsonNormal"></span>
					</div>
					<div
						class="mt-3 d-flex flex-wrap"
						:style="{
							width:
								isPreview && previewEventIndex === eventIndex
									? 'auto'
									: event.pics.length && event.pics.length % 3 == 0
									? 'calc(153px * 3 + 3vw * 3)'
									: event.pics.length && event.pics.length % 2 == 0
									? 'calc(153px * 2 + 3vw * 2)'
									: 'auto',
						}"
					>
						<ImageGroupPreview
							:imgList="event.pics"
							v-if="event.preview"
							v-model:preview="event.preview"
							v-model:current="previewImgIndex"
						/>
						<div v-else v-for="(img, imgIndex) in event.pics" :key="imgIndex" class="position-relative me-3 mb-3">
							<img
								class="rounded-5 eventPicsItem cursor-zoom-in"
								:style="{ 'object-fit': event.pics.length > 1 ? 'cover' : '' }"
								:width="event.pics.length == 1 ? img.width / 3 : 153"
								:height="event.pics.length == 1 ? img.height / 3 : 153"
								:src="img.originUrl"
								@click="
									events = events.map((item, index) => ({ ...item, preview: eventIndex === index }));
									previewImgIndex = imgIndex;
									previewEventIndex = eventIndex;
								"
							/>
							<div v-if="img.height / img.width > 1.5" :class="`position-absolute text-white longImg flex-center`">长图</div>
						</div>
					</div>
					<div class="d-flex align-items-center justify-content-end operatedRow">
						<div class="flex-center hover-opacity">
							<PraiseIcon @click="praiseEvent(event.info.threadId, 0)" v-if="event.info.liked" color="#ec4141" width="12" height="12" />
							<PraiseIcon @click="praiseEvent(event.info.threadId, 1)" v-else width="12" height="12" />
							（{{ event.info.likedCount }}）
						</div>
						<span class="d-inline-block bg-border mx-3" style="width: 1px; height: 10px"></span>
						<div class="flex-center hover-opacity">
							<shareIcon
								@click="
									forwardVisible = true;
									evId = event.id;
								"
								width="12"
								height="12"
							/>
							（{{ event.info.shareCount }}）
						</div>
						<span class="d-inline-block bg-border mx-3" style="width: 1px; height: 10px"></span>
						<div @click="handleClickComment(event.info.threadId)" class="flex-center hover-opacity">
							<CommentIcon width="12" height="12" />
							（{{ event.info.commentCount }}）
						</div>
					</div>
					<CommonComment
						v-if="currentThreadId === event.info.threadId && showComment"
						:api="() => getEventCommentApi(event.info.threadId)"
						:praiseApi="(cid, type) => praiseComment(cid, event.info.threadId, type)"
						class="mt-4"
						style="background-color: #f5f5f5"
					>
						<template #end>
							<div class="w-100 border border-start-0 border-end-0 border-white" />
							<div
								@click="$router.push({ path: '/container/friendCommentDetail', query: { threadId: event.info.threadId } })"
								class="text-muted text-center py-2 hover-opacity cursor-pointer"
							>
								查看更多评论 >
							</div>
						</template>
					</CommonComment>
				</div>
			</div>
		</div>
		<div class="rightEvent border-start flex-shrink-0">
			<UserInfoCardForFriends v-if="loginStatus" />
			<div v-else class="d-flex px-4 flex-column align-items-center">
				<img class="mt-5 w-100" :src="require('@/assets/img/platform.png')" alt="" />
				<div class="text-black-50 my-3 text-center">登录NoteMusic,可以享受无限收藏的乐趣，并且无限同步到手机</div>
				<div
					@click="$store.commit('changeLoginModalVisible', true)"
					class="loginBtn fs-5 w-100 text-white cursor-pointer text-center rounded-pill bg-primary"
				>
					立即登录
				</div>
			</div>
			<div class="w-100" v-if="hotTopics?.length">
				<div class="px-4 d-flex justify-content-between pt-4 pb-3">
					<span>热门话题</span>
					<span class="hover-opacity">更多&nbsp;></span>
				</div>
				<div class="ps-4 py-1 hover-item-grey d-flex" v-for="(item, index) in hotTopics" :key="index">
					<img :src="item.sharePicUrl" width="38" height="38" class="rounded-2 object-fit-cover me-2" alt="" />
					<div>
						<div class="mb-1">#{{ item.title }}#</div>
						<div class="text-black-50">{{ item.participateCount }}人参与</div>
					</div>
				</div>
			</div>
		</div>
		<ForwardEvent @onSuccess="getEvent" :evId="evId" v-model:visible="forwardVisible" v-model:value="forwards" />
	</div>
</template>

<script lang="ts">
import { NavsProps } from "@/components/viewParts/HorizontalNav.vue";
import { computed, ComputedRef, defineComponent, reactive, toRefs, watch } from "vue";
import { mapEventName, YYYYMMDD } from "@/utils/filters";
import { useStore } from "vuex";
import { getHotTopicApi, getEventApi, likeResourceApi, getEventCommentApi, likeCommentApi } from "@/api/common";
import { AxiosResponseProps } from "@/utils/request";
interface FriendsProps {
	navs: NavsProps[];
	events: any[];
	loginStatus: ComputedRef;
	hotTopics: object[];
	currentThreadId: string;
	showComment: boolean;
	forwardVisible: boolean;
	forwards: string;
	evId: null | string | number;
	previewImgIndex: number;
	previewEventIndex: number;
}
export default defineComponent({
	setup() {
		const store = useStore();
		const state = reactive<FriendsProps>({
			navs: [
				{
					title: "动态",
					active: true,
				},
			],
			events: [],
			loginStatus: computed(() => store.getters.getLoginStatus),
			hotTopics: [],
			currentThreadId: "",
			showComment: true,
			forwardVisible: false,
			forwards: "",
			evId: null,
			previewImgIndex: 0,
			previewEventIndex: 0,
		});
		const isPreview = computed(() => state.events.some((item) => item.preview));
		watch(
			() => state.loginStatus,
			(newV) => {
				initPageData();
			}
		);
		const getEvent = () => {
			getEventApi().then((res: any) => {
				if (res.code === 200) {
					state.events = res.event.map((item) => ({
						...item,
						jsonActive:
							JSON.parse(item.json).msg && JSON.parse(item.json)?.msg.match(/(?<=#).+(?=#)/)?.length
								? `#${JSON.parse(item.json)?.msg.match(/(?<=#).+(?=#)/)}#`
								: "",
						jsonNormal:
							item.json && JSON.parse(item.json).msg ? JSON.parse(item.json).msg.split("#")[item.json.split("#").length - 1] : "",
					}));
				} else {
					state.events = [];
				}
			});
		};
		const getHotTopic = () => {
			getHotTopicApi().then((res: any) => {
				if (res.code === 200) {
					state.hotTopics = res.hot;
				} else {
					state.hotTopics = [];
				}
			});
		};
		const initPageData = () => {
			getEvent();
			getHotTopic();
		};
		initPageData();
		const handleClickComment = (threadId) => {
			if (state.currentThreadId === threadId) {
				state.currentThreadId = "";
			} else {
				state.currentThreadId = threadId;
			}
		};
		const praiseEvent = (threadId, t) => {
			return likeResourceApi({ type: 6, t, threadId }).then((res: AxiosResponseProps) => {
				if (res.code === 200) {
					getEvent();
				}
			});
		};
		const praiseComment = (cid: number | string, threadId: string, t: 0 | 1) => {
			likeCommentApi({ cid, t, type: 6, threadId });
		};
		return {
			...toRefs(state),
			mapEventName,
			YYYYMMDD,
			JSON: window.JSON,
			handleClickComment,
			praiseEvent,
			getEventCommentApi,
			praiseComment,
			getEvent,
			console,
			isPreview,
		};
	},
});
</script>

<style scoped lang="scss">
.friends {
	// height: calc(100% - 38px);
	overflow-y: scroll;
	.eventContent {
		/* min-width: 800px; */
		.noEvents {
			margin-top: 80px;
		}
		.eventItem {
			.richText {
				white-space: pre-wrap;
			}
			.rightContent {
				/* min-width: 600px; */
				.longImg {
					position: absolute;
					width: 36px;
					height: 18px;
					bottom: 3px;
					right: 3px;
					border: 1px solid #fff;
					border-radius: 8px;
					transform: scale(0.9);
				}
				.operatedRow {
					margin-top: 20px;
				}
			}
		}
	}
	.rightEvent {
		width: 235px;
		height: 520px;
		.loginBtn {
			padding: 7px 0;
		}
	}
}
</style>
